<template>
  <div class="Toolbar" @click="">
    <div class="tool" @click="">
      <div class="plugIn"
           :key="index"
           v-for="(t, index) in plugIns"
           @click="store.setMaterialPanelChange({type:'togglePanel', payload: { plugIn:t }})"
      >
        <a-tooltip placement="left">
          <template #title>
            <span>{{ t.label }}</span>
          </template>
          <i :class="`iconfont ${t.icon}`"
             :style="store.materialPanel.id === t.id && store.materialPanel.display && {color:'#3967FF', fontSize:'30px'}"/>
        </a-tooltip>
      </div>
    </div>

    <div :class="store.materialPanel.affix ? 'extend' : 'extend ifAffix'" v-if="store.materialPanel.display">
      <div class="panelHeader">
        <div class="title">{{ store.materialPanel.label }}</div>
        <div class="features">
          <i class="iconfont icon-guding"
             @click="store.setMaterialPanelChange({type:'ifAffix'})"
             :style="store.materialPanel.affix && {color:'#3967FF'}"
          />
          &nbsp;
          <i class="iconfont icon-cuowu" @click="store.setMaterialPanelChange({type:'hide'})" />
        </div>
      </div>
      <div class="panelFeatures">
        <ComponentLibrary v-if="store.materialPanel.id === 'componentLibrary'"></ComponentLibrary>
        <Sources v-if="store.materialPanel.id === 'sources'"></Sources>
        <Events v-if="store.materialPanel.id === 'events'"></Events>
        <Schema v-if="store.materialPanel.id === 'json'"></Schema>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ComponentLibrary from "@/components/material/ComponentLibrary/index.vue";
import Sources from "@/components/material/Sources/index.vue";
import Events from "@/components/material/Events/index.vue";
import Schema from "@/components/material/Schema/index.vue";

import { useLowCodeStore } from "@/stores";
const store = useLowCodeStore();

const plugIns = [
  { icon:'icon-zujianhua', label:'组件库', id:'componentLibrary' },
  { icon:'icon-shujuyuan', label:'数据源', id:'sources' },
  { icon:'icon-shijianguanli', label:'事件管理', id:'events' },
  { icon:'icon-json', label:'Schema', id:'json' }
]


</script>

<style scoped lang="less">
  .Toolbar {
    height: 100%;
    display: flex;
    position: relative;
    .tool {
      width: 50px;
      height: 100%;
      .plugIn {
        width: 100%;
        line-height: 50px;
        text-align: center;
        i {
          cursor: pointer;
          font-size: 24px;
        }
      }
    }
    .extend {
      width: 300px;
      height: 100%;
      display: flex;
      flex-direction: column;
      border: 1px solid #eeeff3;
      background-color: #ffffff;
      z-index: 9999;
      .panelHeader {
        width: 100%;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eeeff3;
        .title {
          font-size: 20px;
          font-weight: 1000;
        }
        .features {
          i {
            cursor: pointer;
            font-size: 18px;
          }
        }
      }
      .panelFeatures {
        width: 100%;
        flex: 1;
        overflow-y: auto;
      }
      .panelFeatures::-webkit-scrollbar {
        width: 4px;
      }
      .panelFeatures::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
      }
      .panelFeatures::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1);
      }
    }
    .ifAffix {
      position: absolute;
      left: 50px;
    }
    i:hover {
      color: var(--vt-c-hover);
    }
  }
</style>
